<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>mock</title>
  <style>
    input,
    label {
      font-size: 20px;
    }

    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }

    header,
    section {
      display: flex;
      justify-content: center;
    }

    header {
      flex: 1;
    }

    section {
      flex: 4;
    }

    aside {
      order: -1;
      width: 30%;
    }

    .container {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .submit-container {
      width: 100%;
    }

    #url {
      width: 90%;
      height: 30px;
    }

    .data-container {
      display: flex;
      width: 100%;
      flex-direction: column;
    }

    .request-container,
    .response-container {
      flex-grow: 1;
    }

    #req,
    #res {
      border: solid 1px #111;
      width: 100%;
      min-height: 50px;
    }
  </style>
  <script>
    function loaded() {
      const xhr = new XMLHttpRequest();
      xhr.open('get', `http://localhost:3001/QueryApiList`);
      xhr.setRequestHeader('Content-Type', 'application/json');

      xhr.onload = function () {
        const { status, response } = this;
        if (status === 200) {
          const res = JSON.parse(response);

          const { status: resStatus, data } = res;
          if (resStatus) {
            const itemList = data.reduce((acc, item) => {
              return acc + `<ol id="${item.replace('/', '_')}"><a onclick="getDetail('${item}')">${item}</a>
                <a href="javascript:void(0)" onclick="removeApi('${item}')">移除</a></ol>`;
            }, '');
            document.getElementById('apiList').innerHTML = itemList;
            getDetail(data[0]);
          }
        }
      }
      xhr.send();
    }

    function getDetail(api) {
      const xhr = new XMLHttpRequest();
      xhr.open('get', `http://localhost:3001/GetApiDetail?url=${api}`);
      xhr.setRequestHeader('Content-Type', 'application/json');

      xhr.onload = function () {
        const { status, response } = this;
        if (status === 200) {
          const result = JSON.parse(response);
          const { req: reqData, res: resData } = result.data;
          const url = document.getElementById('url');
          const req = document.getElementById('req');
          const res = document.getElementById('res');
          url.innerText = api;
          url.setAttribute('href',`/TrueApi?url=${api}`);
          req.innerHTML = JSON.stringify(reqData, '', '\t');
          res.innerHTML = JSON.stringify(resData, '', '\t');
        }
      }
      xhr.send();
    }
    function removeApi(api) {
      const xhr = new XMLHttpRequest();
      xhr.open('get', `http://localhost:3001/removeApi?url=${api}`);
      xhr.setRequestHeader('Content-Type', 'application/json');

      xhr.onload = function () {
        const { status, response } = this;
        if (status === 200) {
          const apiList = document.getElementById('apiList');
          apiList.removeChild(document.getElementById(api.replace('/', '_')));
        }
      }
      xhr.send();
    }
  </script>
</head>

<body onload="loaded()">
  <header>
    <h1>API列表</h1>
  </header>
  <section>
    <div class="container">
      <div class="submit-container">
        <label for="url">url:</label>
        <a id="url" target="_blank"></a>
      </div>
      <div class="data-container">
        <div class="request-container">
          <p>请求参数格式</p>
          <pre id="req"></pre>
        </div>
        <div class="response-container">
          <p>响应参数格式</p>
          <pre id="res"></pre>
        </div>
      </div>
    </div>
    <aside>
      <ul id="apiList"></ul>
    </aside>
  </section>
</body>

</html>